<template>
    <div class="shop">
        <van-search shape="round" @focus="jumpSearch" 
            placeholder="请输入产品名称"
            background="#ff411c"
            show-action
        >
            <template #action>
                <i 
                    :class="['iconfont',isBigPic?'icon-shangpinliebiao1':'icon-shangpinliebiao']"
                    @click="toggleComponent"
                ></i>
            </template>
        </van-search>
        <!-- 标题栏开始 -->
        <div class="title">
            <van-grid>
                <van-grid-item class="red" :text="title"></van-grid-item>
                <van-grid-item  :class="{red:condition.priceOrder!=''}" @click="orderPrice" text="价格">
                    <div class="con">
                        <span>价格</span>
                        <img :src="picon" alt="">
                    </div>
                </van-grid-item>
                <van-grid-item :class="{red:condition.salesOrder!=''}" @click="orderSales" text="销量">
                    <div class="con">
                        <span>销量</span>
                        <img :src="sicon" alt="">
                    </div>
                </van-grid-item>
                <van-grid-item  text="新品"></van-grid-item>
            </van-grid>
        </div>
        <!-- 标题栏结束 -->
        <!-- loading -->
        <van-loading type="spinner" color="#ff411c" size="24" v-show="isLoad"/>
        <!-- 内容开始 -->
        <div class="shopMes">
            <ul v-if="!isBigPic" class="picList">
                <template>
                    <li v-for="item in list" :key="item.id">
                        <shop-item :item="item">
                            <span slot="saleRight">已售 {{item.sales}}件</span>
                        </shop-item>
                    </li>
                </template>
            </ul>
            <ul v-else class="bigPic">
                <template>
                    <li v-for="item in list" :key="item.id">
                        <picture-item :item="item">
                            <div class="price">
                                <div class="t">{{item.price}}</div>
                                <div class="b">
                                    <div class="l">
                                        <span>{{item.vip_price}}</span>
                                        <img :src="vip_url" alt="" v-lazy="vip_url">
                                    </div>
                                    <span>已售{{item.sales}}件</span>  
                                </div>
                            </div>
                        </picture-item>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script>
import ShopItem from '../components/ShopItem';
import PictureItem from '../components/PictureItem';
export default {
    props:['id'],
    components:{ShopItem,PictureItem},
    data(){
        return{
            isBigPic:true,
            condition:{
                page: 1,
                limit: 8,
                keyword:'',
                sid: 0, // 分类id
                news: 0,
                priceOrder:'', //asc desc
                salesOrder:'', //asc desc
                isLoad:true,
            },
            list:[],
            vip_url:'',
            title:'',
            picon:'',
            sicon:'',
        }
    },
    created(){
        this.vip_url = '';
        this.title = this.$route.query.title;
        this.condition.sid = this.id;
        this.search();
    },
    methods:{
        jumpSearch(){
            this.$router.push('/search')
        },
        toggleComponent(){
            this.isBigPic = !this.isBigPic;
        },
        search(){
            this.isLoad = true;
            this.axios.get('/api/products',{
                params:this.condition,
            }).then(d => {
                // console.log(d.data.data);
                this.list = d.data.data;
                this.isLoad = false;
            })
        },
        // 价格
        orderPrice(){
            this.condition.salesOrder = '';
            this.sicon = '';
            if(this.condition.priceOrder == ''){
                this.condition.priceOrder = 'desc';
                this.picon = '';
            }else if(this.condition.priceOrder == 'desc'){
                this.condition.priceOrder = 'asc';
                this.picon = '';
            }else{
                this.condition.priceOrder = '';
                this.picon = '';
            }
            this.search();
        },
        orderSales(){
            this.condition.priceOrder = '';
            this.picon = '';
            if(this.condition.salesOrder == ''){
                this.condition.salesOrder = 'desc';
                this.sicon = '';
            }else if(this.condition.salesOrder == 'desc'){
                this.condition.salesOrder = 'asc';
                this.sicon = '';
            }else{
                this.condition.salesOrder = '';
                this.sicon = '';
            }
            this.search();
        },
    }
}
</script>

<style lang="less">
.shop{
    padding-bottom: 30px;
    min-height: 100vh;
    background-color: #f5f5f5;
    .van-search__action{
        height: 30px;
        i{
            font-size: 22px;
            color: white;
        }
        &:active{
            background-color: transparent;
        }
    }
    .title{
        .red{
            span{
                &.van-grid-item__text{
                    color: red;
                } 
            }
        }
        .van-grid-item{
            .van-grid-item__content{
                // border: solid 1px red;
                // padding: 15px;
                .con{
                    display: flex;
                    align-items: center;
                    span{
                        font-size: 12px;
                    }
                    img{
                        height: 10px;
                        margin-left: 4px;
                    }

                }
            }

        }
    }
    .van-loading{
        // border: solid 1px red;
        display: flex;
        justify-content: center;
    }
    .shopMes{
        .picList{
            li{
                margin: 6px 0;
                .shop_item{
                    border-radius: 6px;
                    background-color: white;
                    .img{
                        img{
                            border-radius: 6px;
                        }
                    }
                }
            }
        }
        .bigPic{
            // border: solid 1px red;
            display: flex;
            flex-wrap: wrap;

            li{
                width: 46%;
                // border: solid 1px blue;
                margin: 4px 2%;
                background-color: white;
                border-radius: 6px;
                .picture_item{
                    padding-top: 4px;
                    .img{
                        height: auto;
                        width: 160px;
                        img{
                            height: auto;
                            width: 160px;
                            border-radius: 4px;
                        }
                    }
                    .mes{
                        padding: 0;
                        p{
                            // font-weight: bold;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
</style>